<template>
  <div id="main">
    <WalletDialog />
    <HeaderView :nav-list="navList" />
    <router-view></router-view>
    <FooterView :nav-list="navList" />
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import WalletDialog from '@/components/WalletDialog.vue';
import HeaderView from '@/components/HeaderView.vue';
import FooterView from '@/components/FooterView.vue';
import WOW from 'wow.js';
interface navItem {
  name: string;
  path: string;
  id: string;
  scrollTopNum?: number;
}
const navList: navItem[] = [
  {
    name: 'ismsg.router.home',
    path: '/home',
    id: '#Home'
  },
  {
    name: 'ismsg.router.ido',
    path: '/IDO',
    id: '#IDO'
  },
  {
    name: 'ismsg.router.pledge',
    path: '/pledge',
    id: '#Pledge'
  },
  {
    name: 'ismsg.router.economics',
    path: '/economics',
    id: '#Economics'
  },
  {
    name: 'ismsg.router.ecoMap',
    path: '/ecoMap',
    id: '#EcoMap'
  },
  {
    name: 'ismsg.router.roadMap',
    path: '/roadMap',
    id: '#RoadMap'
  },
  // {
  //   name: 'ismsg.router.howToBuy',
  //   path: '/howToBuy',
  //   id: '#HowToBuy'
  // },
  {
    name: 'ismsg.router.about',
    path: '/about',
    id: '#About'
  }
];

onMounted(() => {
  let wow = new WOW({
    boxClass: 'wow',
    animateClass: 'animated',
    offset: 0,
    mobile: true,
    live: true,
    scrollContainer: null,
    resetAnimation: true
  });
  wow.init();
});
</script>

<style lang="scss" scoped>
@import '@/assets/fonts/font.css';

#main {
  width: 100%;
  overflow: hidden;
  background-color: rgb(58, 30, 16);
  :deep(.el-drawer__close-btn) {
    padding: 2px;
    font-size: 30px;
    border: thin solid rgba($color: #030000, $alpha: 0.15);
  }
}

@media screen and (max-width: 768px) {
  #main{
    width: 100vw;
  }
  .phoneImg {
    display: block !important;
  }
}
</style>
